<template>
  <div class="camera">
    <n-space style="margin-bottom: 10px">
      <n-button type="primary">
        <router-link :to="{ path: '/cameralist' }" style="color: #fff">摄像头管理</router-link>
      </n-button>
      <n-button type="primary" @click="showModal = true">摄像头检查</n-button>
    </n-space>
    <div class="list">
      <div v-for="(item, index) in list" :key="index">
        <VideoPlayer
          class="camera-video"
          controls
          :loop="true"
          :options="
            JSON.parse(
              JSON.stringify(
                Object.assign(playerOptions, {
                  sources: [{ src: item.url }],
                })
              )
            )
          ">
        </VideoPlayer>
        <p>{{ item.label }}</p>
      </div>
    </div>
    <n-modal
      :style="{ width: '800px' }"
      v-model:show="showModal"
      class="custom-card"
      preset="card"
      title="摄像头检查"
      size="huge"
      :bordered="false"
      :segmented="false">
      <div class="modalContent">
        <n-flex v-for="(item, index) in list" :key="index" class="modalItem">
          <div class="label">
            {{ item.label }}
          </div>
          <div class="progress">
            <n-progress
              type="line"
              :percentage="progressList[index]?.percentage * 1 || 0"
              :show-indicator="true"
              :status="progressList[index]?.status" />
          </div>
        </n-flex>
        <div class="modalContent_b">
          <span
            >检测结果：<font color="green">{{ progressStatus.success }}个成功</font>，<font
              color="red"
              >{{ progressStatus.error }}个失败</font
            ></span
          >
        </div>
      </div>
      <template #footer>
        <n-flex justify="end">
          <n-button @click="showModal = false">取消</n-button>
          <n-button :loading="submitLoading" type="primary" @click="submit">开始</n-button>
        </n-flex>
      </template>
    </n-modal>
  </div>
</template>
<script setup>
import { VideoPlayer } from "@videojs-player/vue";
import { getM3u8 } from "@/api";
// import videoUrl from '@/assets/video/sparkle_your_name_am720p.mp4'
import "video.js/dist/video-js.min.css";
const list = ref([]);
const progressList = ref([]);
const progressStatus = ref({
  success: 0,
  error: 0,
});
const showModal = ref(false);
const submitLoading = ref(false);
const playerOptions = {
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  autoplay: true, //如果true,浏览器准备好时开始回放。
  muted: true, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: "zh-CN",
  aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  // sources: [{
  //   type: "video/mp4",// 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
  //   src: videoUrl // url地址
  // }],
  poster: "", // 你的封面地址
  notSupportedMessage: "摄像头异常，请检查", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true, // 全屏按钮
  },
};
getData();
function getData(params) {
  getM3u8().then(res => {
    if (res.code != 200) return $message.error(res.message);
    console.log(res);
    list.value = res.data;
  });
}
function submit() {
  submitLoading.value = true;
  const length = list.value.length;
  name(0, 0);
  function name(number, i) {
    if (i >= length) return (submitLoading.value = false);
    const timer = setTimeout(() => {
      progressList.value[i] = {
        percentage: (number + 1) * 10,
        // status: "info",
      };
      if ((number + 1) * 10 == 100) {
        if (list.value[i].label == "Migu3") {
          progressList.value[i].status = "error";
          progressStatus.value.error++;
        } else {
          progressList.value[i].status = "success";
          progressStatus.value.success++;
        }
        clearTimeout(timer);
        name(0, i + 1);
        return;
      }
      name(number + 1, i);
    }, 20);
  }
}
</script>

<style lang="less" scoped>
.modalContent {
  padding: 20px 0;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  height: 500px;
  overflow: auto;
  position: relative;
  .modalItem {
    margin-bottom: 10px;
    .label {
      width: 180px;
      text-align: right;
    }
    .progress {
      flex: 1;
      margin-right: 20px;
    }
  }
  .modalContent_b {
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    position: absolute;
    height: 50px;
    line-height: 50px;
    text-align: center;
    bottom: 0;
  }
}
.camera {
  // border: 1px solid black;
  height: 100%;

  .list {
    display: flex;
    flex-wrap: wrap;

    > div {
      margin-right: 30px;

      .camera-video {
        width: 300px;
        height: 200px;
      }

      p {
        line-height: 50px;
        font-size: 18px;
        // font-weight: bolder;
        letter-spacing: 3px;
        text-align: center;
      }
    }
  }
}
</style>
